$class-prefix-card: 'ygm-card';

.#{$class-prefix-card} {
  --card-header-padding: 13px;
  --card-body-padding: 0 13px 13px 13px;

  background: var(--ygm-color-white);
  border-radius: var(--ygm-radius-xl);
  overflow: hidden;
  transform: rotate(0deg);

  &-header {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    padding: var(--card-header-padding);

    &-title {
      font-size: var(--ygm-font-size-xl);
    }

    &-extra {
      font-size: var(--ygm-font-size-m);
    }
  }

  &-body {
    position: relative;
    padding: var(--card-body-padding);
    box-sizing: border-box;
  }
}
